<template>
  <div class="file">
    <a-row :gutter="24" style="padding:24px 24px 0;">
      <a-col :span="6">
        <a-button-group  style="white-space: nowrap;">
          <a-button>
            <a-icon type="left" />
          </a-button>
          <a-button>
            <a-icon type="right" />
          </a-button>
        </a-button-group>
      </a-col>
      <a-col :span="18">
        <a-input-group size="small" compact>
          <a-button>
            <a-icon type="home" />
          </a-button>
          <a-auto-complete
            ref="input"
            :getPopupContainer="e => {return e.parentNode || document.body}"
            optionLabelProp="key"
            placeholder=""
            allowClear
            @select = 'inputSelect'
            style="width:70%;"
          >
            <template slot="dataSource">
              <a-select-option v-for="item in dataSource" :key="item.title" :value="item.path">
                {{ item.title }}
              </a-select-option>
            </template>
          </a-auto-complete>
        </a-input-group>
      </a-col>
    </a-row>
    <slot v-if="$slots.fileCharge" name="fileCharge"></slot>
    <div class="file-box" v-else>
      <router-link to="" :key="index" v-for="(item,index) in list">
        <a-card class="card" hoverable>
          <img slot="cover" :src="item.icon" />
          <div class="content">
            <span>{{item.title}}</span>
          </div>
        </a-card>
      </router-link>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
  name: 'FileChargeLayout',
  props:['list'],
  data () {
    return {
      dataSource:[],
    }
  },
  computed:{
    ...mapGetters('setting', ['windowMenu']),
  },
  provide() {
    return {
      FileChargeLayout: this
    }
  },
  mounted () {
    this.dataSource = this.windowMenu(this.$route.path.split('/')[2]).children.map(item=>{
      return {
        title:item.name,
        path: item.fullPath
      }
    })
  },
  methods: {
    inputSelect(e){
      if(this.$route.path!=e) this.$router.push(e)
    }
  }

}
</script>
<style lang="less" scoped>
  .file{
    background-color: @base-bg-color;
    height: auto;
    .file-box{
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 100px;
      padding-left: 24px;
      .card{
        width: 144px;
        margin-top: 24px;
        margin-right: 24px;
        border-radius: 6px;
        /deep/.ant-card-cover{
          text-align: center;
          padding: 12px 0;
          img{
            width: 72px;
            height: 72px;
            display:inline;
          }
        }
        /deep/.ant-card-body{
          padding: 2px;
          text-align: center;
          background-color: fade(@title-color, 16%);
        }
      }
    }
    
  }
</style>